<template>
  <div class="subscribe-box">
    <div class="subscribe-box-header">
      <div class="subscribe-box-header-text">
        <h2 class="text-class">订阅栏</h2>
      </div>
    </div>
    <div class="subscribe-box-body">
      <div class="subscribe-box-body-header">
        <a-input v-model="equipmentNumber" placeholder="输入设备号" />
        <a-button type="primary" :disabled="ifOnClick" :loading="loading" @click="onSubscribe">订阅</a-button>
      </div>
      <div class="subscribe-box-body-form">
        <div class="subscribe-box-body-item">
          <a-tag v-show="ifSubscribeFlag" color="green" closable @close="onCloseSubscribe">
            设备编号:{{ list.equipmentNumber }}
          </a-tag>
        </div>
      </div>

    </div>
    <div class="subscribe-box-footer">
      <div class="subscribe-box-footer-text">
        <h2 class="text-class">消息列表</h2>
      </div>
      <div v-show="!ifSubscribeFlag" class="noMessage">
        <p>请先连接订阅！！</p>
        <a-icon type="stop" theme="twoTone" style="font-size: 10em" two-tone-color="#adaeb0" />
      </div>
      <message v-show="ifSubscribeFlag" :equipment-number="list.equipmentNumber" :if-subscribe-flag="ifSubscribeFlag" />
    </div>
  </div>
</template>

<script>
import { closeSubscribeByEquipmentNumber, subscribeByEquipmentNumber } from '@/api/subscribe'
import Message from '@/views/dashboard/admin/components/Message'

export default {
  name: 'Subscribe',
  components: { Message },
  props: {
    ifConnectFlag: {
      type: Boolean,
      default: false
    },
    connectKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      equipmentNumber: '', // 设备编号输入框输入值
      ifOnClick: true, //  是否可以点击按钮 true代表不可以
      list: {
        connectKey: '', // 连接connectKey
        equipmentNumber: ''// 订阅的设备编号
      },
      loading: false,
      ifSubscribeFlag: false // 是否订阅 默认是false 无订阅
    }
  },
  watch: {
    ifConnectFlag() {
      if (this.ifConnectFlag === true) {
        this.ifOnClick = false
      } else {
        this.ifOnClick = true
      }
    }
  },
  methods: {
    // 点节订阅按钮
    onSubscribe() {
      this.loading = true
      this.list.connectKey = this.connectKey
      this.list.equipmentNumber = this.equipmentNumber
      subscribeByEquipmentNumber(this.list).then(() => {
        setTimeout(() => {
          this.$notification.success({
            message: '成功',
            description:
              '订阅成功',
            onClick: () => {
              console.log('订阅成功!')
            }
          })
          this.ifSubscribeFlag = true
          this.loading = false
          this.ifOnClick = true
        }, 1.5 * 1000)
      })
    },
    // 点击取消订阅
    onCloseSubscribe() {
      this.ifSubscribeFlag = false
      if (this.ifConnectFlag === true) {
        this.ifOnClick = false
      }
      closeSubscribeByEquipmentNumber(this.list).then(() => {
        setTimeout(() => {
          this.$notification.success({
            message: '成功',
            description:
              '取消订阅',
            onClick: () => {
              console.log('订阅成功!')
            }
          })
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>
.subscribe-box{
  font-size: 100%;
  display: flex;
  flex-direction: column;
}
.subscribe-box-header {
  margin-top: 0.5em;
  background-color: #13ce66;
  border-radius: 0.8em;
  height: 3em;
}
.subscribe-box-body {
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  border: 0.2em solid #72e760;
  border-radius: 0.8em;
  height: 20em;
}
.subscribe-box-body-header {
  display: flex;
}
.subscribe-box-body-form {
  display: flex;
  flex-direction: column;
  border: 0.2em solid #72e760;
  border-radius: 0.4em;
  margin-top: 0.5em;
  height: 20em;
}
.subscribe-box-body-item {
  display: flex;
  margin-top: 0.5em;
}
.subscribe-box-header-text {
  text-align-last:justify;
  font-family: "Lucida Console", "Courier New", monospace;
}
.text-class {
  margin: 7px 35px 13px 35px;
  color: white;
}
.subscribe-box-footer {
  padding: 0.1em;
  margin-top: 0.5em;
  border: 0.2em solid #39d3ee;
  border-radius: 0.8em;
  height: 35em;
}
.subscribe-box-footer-text {
  background-color: #13ce66;
  border-radius: 0.8em;
  text-align-last:justify;
  font-family: "Lucida Console", "Courier New", monospace;
  height: 3em;
  padding-top: 1px;
}
/*未连接订阅时消息栏显示的内容*/
.noMessage {
  font-size: larger;
  color: #adaeb0;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
